<template>
	
	<div class="uploadexcel">
    	<vue-xlsx-table class="upload-icon" @on-select-file="handleSelectedFile"><i class="el-icon-upload"></i> Upload Excel</vue-xlsx-table>

    	<template>
		  <el-table :data="tableData" stripe border style="width: 100%">
		    <el-table-column prop="StudentNo" label="StudentNo" width="120"></el-table-column>
		    <el-table-column prop="EnglishName" label="EnglishName" width="140"></el-table-column>
		    <el-table-column prop="ChineseName" label="ChineseName" width="140"></el-table-column>
		    <el-table-column prop="Gender" label="Gender" width="100"></el-table-column>
		    <el-table-column prop="Email" label="Email" width="310"></el-table-column>
		    <el-table-column prop="Programme" label="Programme" width="120"></el-table-column>
		    <el-table-column prop="StudyYear" label="StudyYear" width="120"></el-table-column>
		  </el-table>
		</template>

    	<!-- <div v-for="item in tableData">
    		{{ item.ChineseName}}
    	</div> -->

	</div>

</template>

<script>
	export default{
		name: 'uploadexcel',
		data(){
			return{
				tableData:[{
					"StudentNo":"0001",
					"EnglishName":"0001",
					"ChineseName":"0001",
					"Gender":"0001",
					"Email":"0001",
					"Programme":"0001",
					"StudyYear":"0001"
				},{
					"StudentNo":"0001",
					"EnglishName":"0001",
					"ChineseName":"0001",
					"Gender":"0001",
					"Email":"0001",
					"Programme":"0001",
					"StudyYear":"0001"
				},{
					"StudentNo":"0001",
					"EnglishName":"0001",
					"ChineseName":"0001",
					"Gender":"0001",
					"Email":"0001",
					"Programme":"0001",
					"StudyYear":"0001"
				}
			]
			}
		},
		methods: {
			handleSelectedFile (convertedData) {
		      console.log(convertedData.body)
		      this.tableData=convertedData.body;
		    }
		}
	}
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.uploadexcel{
	float:left;
	margin: 20px;
}
.upload-icon{
	float:left;
	margin: 20px;
}
</style>